components/waves/leaderboard/header/WaveLeaderboardCurationGroupSelect.tsx (2)

86-123: Desktop tabs lack semantic role and aria attributes.

The view mode tabs in WaveleaderboardHeader.tsx (Line 139-148) use role="tablist", role="tab", and aria-selected. These curation group tabs serve a similar purpose but lack equivalent accessibility attributes, creating an inconsistency.

♿ Suggested accessibility improvement

   return (
     <div
       data-testid="curation-group-select"
-      className="tw-flex tw-items-center tw-gap-x-1"
+      className="tw-flex tw-items-center tw-gap-x-1"
+      role="tablist"
+      aria-label="Curation groups"
     >
       {items.map((item) => {
         const pfp = item.value ? pfpMap.get(item.value) : null;
         return (
           <button
             key={item.key}
             type="button"
+            role="tab"
+            aria-selected={selectedGroupId === item.value}
             className={getTabClassName(item.value)}
             onClick={() => onChange(item.value)}
           >

---

43-53: Spreading query results into useMemo deps is fragile.

The // eslint-disable-next-line react-hooks/exhaustive-deps suppression on the spread ...groupDetailsQueries.map((q) => q.data) works in practice because react-query preserves referential identity for unchanged data, but the deps array length changes if groups changes, which can confuse the hooks contract. Consider deriving a stable dependency instead.

♻️ Alternative: use a JSON-serialized key

   const pfpMap = useMemo(() => {
     const map = new Map<string, string>();
     groups.forEach((group, i) => {
       const pfp = groupDetailsQueries[i]?.data?.created_by?.pfp;
       if (pfp) {
         map.set(group.id, pfp);
       }
     });
     return map;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [groups, ...groupDetailsQueries.map((q) => q.data)]);
+  }, [groups, groupDetailsQueries]);

Since useQueries returns a new array reference only when query results change, using the array directly is equivalent and avoids the lint suppression. Alternatively, if you want more precise control, you could extract a serialized key from the query data.

components/waves/leaderboard/header/WaveLeaderboardCurationGroupSelect.tsx (1)

86-125: Desktop tab rendering is well-structured.

Good details: type="button" prevents accidental form submissions, alt="" is correct for decorative avatars, and the conditional pfp rendering gracefully handles the loading state (no avatar until data arrives).

One optional nit: getTabClassName is re-created on every render. Since it captures selectedGroupId from closure, you could extract it to a useCallback or pass selectedGroupId as a parameter to a module-level function. This is purely a minor optimization and not necessary given the component's complexity.